<template>
	<view class="content">
		<button :style="{backgroundColor:(borderShow==true?'#fff':backColor),border:(borderShow==true?'1px solid'+backColor:''),color:(borderShow==true?backColor:'#fff')}"
		 :class="['my_btn',{'btn_warning':type=='warning'&&borderShow==false},{'btn_warning_border':type=='warning'&&borderShow==true},{'btn_success':type=='success'&&borderShow==false},{'btn_success_border':type=='success'&&borderShow==true},{'btn_primary':type=='primary'&&borderShow==false},{'btn_primary_border':type=='primary'&&borderShow==true},{'btn_danger':type=='danger'&&borderShow==false},{'btn_danger_border':type=='danger'&&borderShow==true}]"
		 type="default" hover-stay-time="200" @tap="handBtn" :animation="animationData" hover-class="my_big">{{title}}</button>
	</view>
</template>
<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'm'
			},
			title: {
				type: String,
				default: "确定"
			},
			backColor: {
				type: String,
				default: '#ffffff'
			},
			fontIcon: {
				type: String
			},
			borderShow: {
				type: Boolean,
				default: false
			},
			fontColor: {
				type: String,
				default: '#ffffff'
			}
			// default: false
		},
		data() {
			return {
				animationData: {},
				off: false,

			}
		},
		created: function() {
			// 初始化一个动画
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		methods: {
			declick() {
				this.rotateAndScale()
			},
			handBtn() {
				// this.animation.scale(1.2, 1.2).step().scale(1, 1).step()
				// this.animationData = this.animation.export()
				this.$emit('myclick')
			},
		},
	}
</script>

<style lang="scss">
	.btn_ {
		border: 1px solid #ccc;
		color: #333;
	}

	.btn_warning_border {
		border: 1px solid rgba(255, 176, 71, 1) !important;
		color: rgba(255, 176, 71, 1) !important;
	}

	.btn_success_border {
		border: 1px solid rgba(42, 168, 69, 1) !important;
		color: rgba(42, 168, 69, 1) !important;
	}

	.btn_primary_border {
		border: 1px solid rgba(42, 168, 69, 1) !important;
		color: rgba(42, 168, 69, 1) !important;
	}

	.btn_danger_border {
		border: 1px solid rgba(207, 66, 56, 1) !important;
		color: rgba(207, 66, 56, 1) !important;
	}
	.btn_success {
		background: rgba(42, 168, 69, 1) !important;
	}

	.btn_primary {
		background: rgba(56, 111, 207, 1) !important;
	}

	.btn_danger {
		background: rgba(207, 66, 56, 1) !important;
	}

	.btn_warning {
		background: rgba(255, 176, 71, 1) !important;
	}

	.my_big {
		transition: all 0.2s;
		transform: scale(1.1, 1.1);
	}

	.my_btn {
		transition: all 0.2s;
		width: 396rpx;
		height: 90rpx;
		background: rgba(255, 176, 71, 1);
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		line-height: 90rpx;
	}
</style>
